<template>
	<view class="page">
		<swiper class="goods-banner" :indicator-dots="true" :autoplay="true" :circular="true">
			<swiper-item v-for="(item, index) in goodsInfo.images" :key="index">
				<image :src="item" mode="aspectFill" class="banner-image"></image>
			</swiper-item>
		</swiper>
		
		<view class="goods-info bg-w pd30">
			<view class="goods-title">{{goodsInfo.title}}</view>
			<view class="goods-price">
				<text class="price-symbol">¥</text>
				<text class="price-value">{{goodsInfo.price}}</text>
			</view>
			
			<view v-if="goodsInfo.enable_distribution" class="commission-info">
				<view class="commission-title">分销收益</view>
				<view class="commission-value">
					<text class="amount">{{goodsInfo.commission_rate}}%</text>
					<text class="desc">佣金比例</text>
				</view>
			</view>
			
			<view class="goods-meta">
				<view class="meta-item">
					<text class="label">分类：</text>
					<text class="value">{{goodsInfo.category_name}}</text>
				</view>
				<view class="meta-item">
					<text class="label">发布时间：</text>
					<text class="value">{{goodsInfo.create_time}}</text>
				</view>
				<view v-if="goodsInfo.area" class="meta-item">
					<text class="label">服务区域：</text>
					<text class="value">{{goodsInfo.area}}</text>
				</view>
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-title">商品描述</view>
			<view class="goods-description">{{goodsInfo.description}}</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-title">联系方式</view>
			<view class="contact-info">
				<view class="contact-item" @click="copyContact(goodsInfo.contact)">
					<text class="label">联系方式：</text>
					<text class="value">{{goodsInfo.contact}}</text>
					<text class="copy-btn">复制</text>
				</view>
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="section-title">分销数据</view>
			<view class="distribution-stats">
				<view class="stat-item">
					<text class="value">{{goodsInfo.distributors || 0}}</text>
					<text class="label">分销商</text>
				</view>
				<view class="stat-item">
					<text class="value">{{goodsInfo.total_sales || 0}}</text>
					<text class="label">总销量</text>
				</view>
				<view class="stat-item">
					<text class="value">¥{{goodsInfo.commission_total || 0}}</text>
					<text class="label">总佣金</text>
				</view>
			</view>
		</view>
		
		<view v-if="goodsInfo.enable_distribution && isLogin" class="bg-w pd30 mb20">
			<view class="section-title">成为分销商</view>
			<view class="distribution-tips">
				<text>推广此商品，可获得{{goodsInfo.commission_rate}}%的佣金</text>
			</view>
			<button class="btn-distribution" @click="becomeDistributor">立即分销</button>
		</view>
		
		<view class="bottom-actions">
			<button class="action-btn favorite-btn" @click="toggleFavorite">
				<text class="iconfont" :class="{'text-theme': isFavorite}">{{isFavorite ? '已收藏' : '收藏'}}</text>
			</button>
			<button class="action-btn share-btn" @click="shareGoods">
				<text class="iconfont">分享</text>
			</button>
			<button class="action-btn contact-btn" @click="contactSeller">
				<text class="iconfont">联系商家</text>
			</button>
			<button class="action-btn buy-btn" @click="buyNow">
				立即购买
			</button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			goodsId: null,
			isFavorite: false,
			goodsInfo: {
				id: 1,
				title: '美味汉堡套餐 - 超值组合',
				price: 29.9,
				commission_rate: 20,
				category_name: '美食餐饮',
				description: '精选优质食材，现做现卖。包含：招牌汉堡1个、薯条1份、可乐1杯。营养均衡，口感极佳，是您用餐的绝佳选择！',
				contact: '13812345678',
				area: '全城配送',
				create_time: '2024-01-15 10:30',
				enable_distribution: true,
				images: [
					'https://picsum.photos/seed/detail1/400/300.jpg',
					'https://picsum.photos/seed/detail2/400/300.jpg',
					'https://picsum.photos/seed/detail3/400/300.jpg'
				],
				distributors: 15,
				total_sales: 89,
				commission_total: 538.20
			}
		};
	},
	computed: {
		...mapState(['memberInfo']),
		isLogin() {
			return this.memberInfo == null ? false : true;
		}
	},
	onLoad(options) {
		this.goodsId = options.id;
		this.loadGoodsDetail();
	},
	onShareAppMessage() {
		return {
			title: this.goodsInfo.title,
			path: `/pages/goods/detail?id=${this.goodsId}`,
			imageUrl: this.goodsInfo.images[0]
		};
	},
	methods: {
		loadGoodsDetail() {
			// 实际项目中这里会调用API获取商品详情
		},
		
		copyContact(contact) {
			uni.setClipboardData({
				data: contact,
				success: () => {
					uni.showToast({ title: '已复制联系方式', icon: 'success' });
				}
			});
		},
		
		toggleFavorite() {
			if (!this.isLogin) {
				uni.showToast({ title: '请先登录', icon: 'none' });
				return;
			}
			
			this.isFavorite = !this.isFavorite;
			uni.showToast({ 
				title: this.isFavorite ? '已收藏' : '已取消收藏', 
				icon: 'success' 
			});
		},
		
		shareGoods() {
			uni.showActionSheet({
				itemList: ['分享给好友', '生成海报'],
				success: (res) => {
					if (res.tapIndex === 0) {
						// 分享给好友
					} else if (res.tapIndex === 1) {
						// 生成海报
						uni.showToast({ title: '正在生成海报...', icon: 'loading' });
					}
				}
			});
		},
		
		contactSeller() {
			uni.makePhoneCall({
				phoneNumber: this.goodsInfo.contact
			});
		},
		
		buyNow() {
			uni.showModal({
				title: '购买确认',
				content: `确定要购买"${this.goodsInfo.title}"吗？`,
				success: (res) => {
					if (res.confirm) {
						uni.showToast({ title: '正在创建订单...', icon: 'loading' });
						// 实际项目中这里会创建订单
					}
				}
			});
		},
		
		becomeDistributor() {
			uni.showModal({
				title: '成为分销商',
				content: `确定要成为此商品的分销商吗？推广可获得${this.goodsInfo.commission_rate}%佣金`,
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: `/pages/distribution/promotion?goodsId=${this.goodsId}`
						});
					}
				}
			});
		}
	}
};
</script>

<style>
.goods-banner {
	height: 400rpx;
}

.banner-image {
	width: 100%;
	height: 100%;
}

.goods-info {
	margin-bottom: 20rpx;
}

.goods-title {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 20rpx;
	line-height: 1.4;
}

.goods-price {
	margin-bottom: 20rpx;
}

.price-symbol {
	font-size: 28rpx;
	color: #ff4757;
}

.price-value {
	font-size: 48rpx;
	color: #ff4757;
	font-weight: 600;
}

.commission-info {
	background: linear-gradient(135deg, #ff6348 0%, #ff8c42 100%);
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	color: white;
}

.commission-title {
	font-size: 24rpx;
	margin-bottom: 10rpx;
	opacity: 0.9;
}

.commission-value {
	display: flex;
	align-items: baseline;
}

.commission-value .amount {
	font-size: 36rpx;
	font-weight: 600;
	margin-right: 10rpx;
}

.commission-value .desc {
	font-size: 24rpx;
	opacity: 0.9;
}

.goods-meta {
	font-size: 24rpx;
	color: #666;
}

.meta-item {
	margin-bottom: 10rpx;
}

.section-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 20rpx;
}

.goods-description {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
}

.contact-info .contact-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #f8f8f8;
	border-radius: 8rpx;
}

.contact-item .label {
	font-size: 28rpx;
	color: #333;
	margin-right: 20rpx;
}

.contact-item .value {
	flex: 1;
	font-size: 28rpx;
	color: #007aff;
}

.copy-btn {
	padding: 6rpx 16rpx;
	background: #007aff;
	color: white;
	border-radius: 4rpx;
	font-size: 24rpx;
}

.distribution-stats {
	display: flex;
	justify-content: space-around;
}

.stat-item {
	text-align: center;
}

.stat-item .value {
	display: block;
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.stat-item .label {
	font-size: 24rpx;
	color: #999;
}

.distribution-tips {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 20rpx;
}

.btn-distribution {
	width: 100%;
	height: 80rpx;
	background: linear-gradient(135deg, #ff6348 0%, #ff8c42 100%);
	color: white;
	border-radius: 40rpx;
	font-size: 28rpx;
	font-weight: 600;
}

.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	display: flex;
	gap: 20rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.action-btn {
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	border: none;
}

.favorite-btn, .share-btn {
	flex: 0 0 100rpx;
	background: #f5f5f5;
	color: #666;
}

.contact-btn {
	flex: 0 0 140rpx;
	background: #f5f5f5;
	color: #333;
}

.buy-btn {
	flex: 1;
	background: #ff4757;
	color: white;
	font-weight: 600;
}
</style>